<template>
    <el-container class="k-layout-container">
        <el-header :height="48">
            <el-button size="small" type="primary" @click="addModel">添加模型</el-button>
        </el-header>
        <el-main>
            <el-table :data="modelList" style="width: 100%">
                <el-table-column label="#" type="index" width="45" align="center"></el-table-column>
                <el-table-column prop="name" label="模型名称" />
                <el-table-column prop="type" label="模型类型">
                    <template v-slot="scope">
                        <span>{{ dicts.modelTypes[scope.row.type] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="vendor" label="模型厂商">
                    <template v-slot="scope">
                        <span>{{ dicts.modelVendors[scope.row.vendor] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="baseUrl" label="BASE URL" show-overflow-tooltip />
                <el-table-column prop="apiKey" label="模型版本" show-overflow-tooltip />
                <el-table-column prop="description" label="模型描述" show-overflow-tooltip />
                <el-table-column prop="status" label="状态" />
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button size="small" @click="updateModel(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteModel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-drawer title="模型设置" v-model="dialogFormModal.visible" size="500px"
            :before-close="() => { dialogFormModal.visible = false; }">
            <el-form ref="modelFormRef" :model="dialogFormModal.form" :label-width="dialogFormModal.formLabelWidth"
                class="k-form">
                <el-form-item label="模型名称">
                    <el-input v-model="dialogFormModal.form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="模型类型">
                    <el-select v-model="dialogFormModal.form.type" placeholder="">
                        <el-option v-for="modelType in options.modelTypes" :key="modelType.value"
                            :label="modelType.label" :value="modelType.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模型厂商">
                    <el-select v-model="dialogFormModal.form.vendor" placeholder="">
                        <el-option v-for="modelVendor in options.modelVendors" :key="modelVendor.value"
                            :label="modelVendor.label" :value="modelVendor.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="BASE URL" v-if="dialogFormModal.form.vendor === 'OPENAI_REST'">
                    <el-input v-model="dialogFormModal.form.baseUrl" autocomplete="off" />
                </el-form-item>
                <el-form-item label="API Key">
                    <el-input v-model="dialogFormModal.form.apiKey" autocomplete="off" />
                </el-form-item>
                <el-form-item label="模型描述">
                    <el-input type="textarea" v-model="dialogFormModal.form.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="dialogFormModal.form.status" placeholder="请选择状态">
                        <el-option label="启用" value="active"></el-option>
                        <el-option label="禁用" value="inactive"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=""></el-form-item>
            </el-form>
            <div style="text-align: center; margin: 20px 0 0;">
                <el-button size="small" @click="dialogFormModal.visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="formSubmit">确 定</el-button>
            </div>
        </el-drawer>
    </el-container>
</template>

<script>

import ai from "@/api/ai";

export default {
    data() {
        return {
            modelList: [],
            dialogFormModal: {
                visible: false,
                form: {
                    name: "",
                    type: "",
                    baseUrl: "",
                    apiKey: "",
                    description: "",
                    status: ""
                },
                formLabelWidth: "120px",
            },
            options: {
                modelTypes: [
                    { label: "生成", value: "GENERATION" },
                    { label: "向量", value: "EMBEDDING" },
                    { label: "重排序", value: "RERANKER" }
                ],
                modelVendors: [
                    { label: "阿里百炼", value: "DASHSCOPE" },
                    { label: "OpenAI", value: "OPENAI_REST" }
                ]
            },
            dicts: {
                modelTypes: {
                    GENERATION: "生成",
                    EMBEDDING: "向量",
                    RERANKER: "重排序"
                },
                modelVendors: {
                    DASHSCOPE: "阿里百炼",
                    OPENAI_REST: "OpenAI"
                }
            },
        };
    },
    created() {
        this.refresh();
    },
    methods: {
        refresh() {
            this.fetchModelList();
        },
        fetchModelList() {
            // 获取模型列表逻辑
            ai.fetchModelList().then(response => {
                this.modelList = response.data;
            });
        },
        addModel() {
            this.dialogFormModal.visible = true;
            this.dialogFormModal.form = {
                name: "",
                type: "",
                baseUrl: "",
                apiKey: "",
                description: "",
                status: ""
            };
        },
        updateModel(model) {
            this.dialogFormModal.form = Object.assign(this.dialogFormModal.form, model);
            this.dialogFormModal.visible = true;
        },
        formSubmit() {
            this.$refs['modelFormRef'].validate((valid) => {
                if (valid) {
                    // 提交表单逻辑
                    if (this.dialogFormModal.form.id) {
                        // 更新模型逻辑
                        ai.updateModel(this.dialogFormModal.form).then(() => {
                            this.$message.success('模型更新成功');
                            this.dialogFormModal.visible = false;
                            this.refresh();
                        });
                    } else {
                        ai.createModel(this.dialogFormModal.form).then(() => {
                            this.$message.success('模型创建成功');
                            this.dialogFormModal.visible = false;
                            this.refresh();
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        deleteModel(model) {
            this.$confirm('是否确认删除该模型？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除模型逻辑
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
};
</script>